<template>
  <div class="app-car-container">
    <CustomContent>
      <template v-slot:body>
        <el-tabs v-model="tabIndex" type="card">
          <el-tab-pane label="基本信息" name="0" v-loading="infoLoading">
            <el-row>
              <el-col :sm="24">
                <MmvTitle title="车辆信息"></MmvTitle>
              </el-col>
              <el-col :sm="24" class="table-padding">
                <el-descriptions class="margin-top margin-bottom" :column="2" :labelStyle="{ width: '180px' }" border>
                  <el-descriptions-item :span="2">
                    <template slot="label"> 品牌/车系/车型</template>
                    {{
                      form.carBrandName +
                      ' ' +
                      form.carSeriesName +
                      ' ' +
                      form.carModelName
                    }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label"> 归属门店</template>
                    {{ form.belongingStoreName }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label"> 停靠门店</template>
                    {{ form.locatedStoreName }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label"> 当前里程/Km</template>
                    {{ form.useMileage }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label"> 保养周期/Km</template>
                    {{ form.maintenanceCycle }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label"> 车辆类型</template>
                    {{ form.carType }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label"> 所属公司</template>
                    {{ form.orgSupplierName }}
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-row>

            <el-row>
              <el-col :sm="24">
                <MmvTitle title="行驶证信息"></MmvTitle>
              </el-col>
              <el-col :sm="24" class="table-padding">
                <el-descriptions class="margin-top margin-bottom" :column="2" :labelStyle="{ width: '180px' }" border>
                  <el-descriptions-item>
                    <template slot="label"> 车牌号</template>
                    {{ form.carNo }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label"> 车架号</template>
                    {{ form.vinNo }}
                  </el-descriptions-item>

                  <el-descriptions-item>
                    <template slot="label"> 发动机号</template>
                    {{ form.engineNo }}
                  </el-descriptions-item>
                  <el-descriptions-item :span="2">
                    <template slot="label"> 注册日期</template>
                    {{ form.drivingLicenseValidityDate }}
                  </el-descriptions-item>
                  <el-descriptions-item :span="2">
                    <template slot="label"> 行驶证照片</template>
                    <el-image v-if="form.drivingLicenseImgFront" :src="getImgUrl(form.drivingLicenseImgFront)"
                      :preview-src-list="[
                        getImgUrl(form.drivingLicenseImgFront),
                      ]" fit="cover" style="width: 400px; height: 300px"></el-image>
                    <el-empty v-else description="未上传行驶证照片"></el-empty>
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-row>

            <el-row>
              <el-col :sm="24">
                <MmvTitle title="车辆设备信息"></MmvTitle>
              </el-col>
              <el-col :sm="24" class="table-padding">

                <el-table :data="deviceList" stripe :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
                  border>
                  <template slot="empty">
                    <el-empty :image-size="50" description="暂未绑定设备信息"></el-empty>
                  </template>
                  <el-table-column label="设备编号" align="center" prop="deviceNo" />
                  <el-table-column label="SIM卡号" align="center" prop="simCard" />
                  <el-table-column label="设备供应商" align="center" prop="manufacturer">
                    <template v-slot="{ row }">
                      <dict-tag :options="dict.type.manufacturer" :value="row.manufacturer" />
                    </template>
                  </el-table-column>
                  <el-table-column label="设备型号" align="center" prop="equipmentModel">
                    <template v-slot="{ row }">
                      <dict-tag :options="dict.type.equipmentModel" :value="row.equipmentModel" />
                    </template>
                  </el-table-column>
                  <el-table-column label="设备类型" align="center" prop="deviceKind">
                    <template v-slot="{ row }">
                      <el-tag v-if="row.deviceKind == 1">有线设备</el-tag>
                      <el-tag v-else-if="row.deviceKind == 2">无线设备</el-tag>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-row v-if="form.assetId">
                <el-col :sm="24">
                  <MmvTitle title="资产信息"></MmvTitle>
                </el-col>
                <el-col :sm="24" class="table-padding">
                  <el-descriptions class="margin-top margin-bottom" :column="2" :labelStyle="{ width: '180px' }" border>
                    <el-descriptions-item>
                      <template slot="label"> 车辆来源</template>
                      <dict-tag :options="dict.type.vehicle_source" :value="form.source" />
                    </el-descriptions-item>
                    <el-descriptions-item v-if="form.source == 1">
                      <template slot="label"> 是否分期</template>
                      <dict-tag :options="dict.type.business_yes_no" :value="form.phasedOrNot" />
                    </el-descriptions-item>
                    <el-descriptions-item v-if="form.source == 1 || form.source == 6">
                      <template slot="label"> 供应商</template>
                      {{ form.supplierName }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="form.source == 1 && form.phasedOrNot == 1">
                      <template slot="label"> 合同开始日期</template>
                      {{ form.startTime }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="form.source == 1 && form.phasedOrNot == 1">
                      <template slot="label"> 合同结束日期</template>
                      {{ form.endTime }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="form.source == 1">
                      <template slot="label"> 车辆购置价格/元</template>
                      {{ form.purchasePrice }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="form.source == 1 && form.phasedOrNot == 1">
                      <template slot="label"> 首付金额/元</template>
                      {{ form.downPayments }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="form.source == 1 && form.phasedOrNot == 1">
                      <template slot="label"> 应付尾款/元</template>
                      {{ form.balancePayment }}
                    </el-descriptions-item>

                    <el-descriptions-item v-if="form.source == 1 && form.phasedOrNot == 1">
                      <template slot="label"> 分期期数/期</template>
                      {{ form.numberOfPeriods }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="form.source == 1 && form.phasedOrNot == 1">
                      <template slot="label"> 已还期数/期</template>
                      {{ form.paidBackPeriods }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="form.source == 1 && form.phasedOrNot == 1">
                      <template slot="label"> 每期应付/元</template>
                      {{ form.eachIssue }}
                    </el-descriptions-item>

                    <el-descriptions-item v-if="form.source == 2">
                      <template slot="label"> 经租账单</template>
                      <dict-tag :options="dict.type.rent_bill_type" :value="form.rentBill" />
                    </el-descriptions-item>
                    <el-descriptions-item v-if="form.source == 2 && form.rentBill == 1">
                      <template slot="label"> 付款比例/%</template>
                      {{ form.paymentProportion }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="form.source == 2 && form.rentBill == 2">
                      <template slot="label"> 付款金额/元</template>
                      {{ form.paymentAmount }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="form.source == 2 && form.rentBill == 2">
                      <template slot="label"> 付款日期</template>
                      {{ form.paymentTime }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="form.source == 2 && form.rentBill != 1 && form.rentBill != 2">
                      <template slot="label"> 合同开始日期</template>
                      {{ form.startTime }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="form.source == 2 && form.rentBill != 1 && form.rentBill != 2">
                      <template slot="label"> 合同结束日期</template>
                      {{ form.endTime }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="form.source == 2 && form.rentBill != 1 && form.rentBill != 2">
                      <template slot="label"> 应付尾款/元</template>
                      {{ form.balancePayment }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="form.source == 2 && form.rentBill != 1 && form.rentBill != 2">
                      <template slot="label"> 已付金额/元</template>
                      {{ form.amountPaid }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="form.source == 2 && form.rentBill != 1 && form.rentBill != 2">
                      <template slot="label"> 金额合同</template>
                      {{ form.contractAmount }}
                    </el-descriptions-item>
                    <el-descriptions-item
                      v-if="(form.source == 2 && form.rentBill != 1 && form.rentBill != 2) || (form.source == 1 && form.phasedOrNot == 1)">
                      <template slot="label"> 付款日</template>
                      {{ form.paymentDate }}
                    </el-descriptions-item>

                    <!-- 托管新增 -->
                    <el-descriptions-item v-if="form.source == 6">
                      <template slot="label"> 托管记录</template>
                      <div style="display: flex;flex-direction: column;justify-content: center; align-items: center;">
                        <div class="depositRecord" v-for="(item, index) in form.depositRecordList" :key="index">{{
                          item.depositStartDate }}至{{ item.depositEndDate }}</div>
                      </div>
                    </el-descriptions-item>

                  </el-descriptions>
                </el-col>
              </el-row>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="保险信息" name="1" v-if="checkPermi(['car:basic:insurance'])">
            <el-row>
              <el-col :span="24">
                <MmvTitle title="商业险信息">
                  <span slot="btn" class="addDevice" @click="opensy=true"  v-if="form.syNo">重新上传</span>
                </MmvTitle>
              </el-col>
              <el-col :sm="24" v-if="form.syNo" class="table-padding">
                <el-descriptions class="margin-top margin-bottom" :column="2" border :labelStyle="{ width: '180px' }">
                  <el-descriptions-item :span="2">
                    <template slot="label"> 保险公司</template>
                    {{ form.syCompany }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label"> 保单号</template>
                    {{ form.syNo }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label"> 总保费</template>
                    {{ form.syPremium }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label"> 保险开始日期</template>
                    {{ form.syStartTime }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label"> 保险截止日期</template>
                    {{ form.syEndTime }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label"> 保单</template>
                    <a v-if="form.syPolicy" :href="getImgUrl(form.syPolicy)" download>
                      <el-button type="text" size="mini" class="table-btn-reply">下载保单</el-button>
                    </a>
                    <span v-else>无</span>
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>
              <el-col :sm="24" v-else class="table-padding">
                <el-empty description="暂未投保"></el-empty>
              </el-col>
              <el-col :span="24">
                <MmvTitle title="交强险保单">
                  <span slot="btn" class="addDevice" @click="openJq=true"  v-if="form.jqNo">重新上传</span>
                </MmvTitle>
              </el-col>

              <el-col :sm="24" class="table-padding" v-if="form.jqNo">
                <el-descriptions class="margin-top margin-bottom" :column="2" border :labelStyle="{ width: '180px' }">
                  <el-descriptions-item :span="2">
                    <template slot="label"> 保险公司</template>
                    {{ form.jqCompany }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label"> 保单号</template>
                    {{ form.jqNo }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label"> 总保费</template>
                    {{ form.jqPremium }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label"> 保险开始日期</template>
                    {{ form.jqStartTime }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label"> 保险截止日期</template>
                    {{ form.jqEndTime }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label"> 保单</template>
                    <a v-if="form.jqPolicy" :href="getImgUrl(form.jqPolicy)" download>
                      <el-button type="text" size="mini" class="table-btn-reply">下载保单</el-button>
                    </a>
                    <span v-else>无</span>
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>
              <el-col :sm="24" v-else class="table-padding">
                <el-empty description="暂未投保"></el-empty>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="维保信息" name="2">
            <el-row>
              <el-col :sm="24" v-if="checkPermi(['car:basic:repair'])">
                <MmvTitle title="车辆维修记录"></MmvTitle>
              </el-col>
              <el-col :sm="24" v-if="checkPermi(['car:basic:repair'])" class="table-padding">
                <el-table v-loading="loading" :data="repairList" border>
                  <el-table-column label="操作" header-align="center" align="center" class-name="small-padding fixed-width"
                    min-width="50" fixed="left">
                    <template slot-scope="scope">
                      <el-button v-if="scope.row.repairStatus == 1" type="text" size="small"
                        @click="overVehicle()">编辑</el-button>
                    </template>
                    <template slot-scope="scope" v-if="scope.row.repairStatus == 1 && checkPermi(['car:basic:maintenanceDeletion'])">
                      <el-button type="text" size="small"
                        @click="maintenanceDeletion(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column label="维修厂名称" align="center" prop="serviceName" />
                  <el-table-column label="送车时间" align="center" prop="repairStartDate" width="180" />
                  <el-table-column label="取车时间" align="center" prop="repairEndDate" width="180" />
                  <el-table-column label="维修费用合计" align="center" prop="totalPay" />
                  <el-table-column label="付款方" align="center" prop="payer">
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.repair_maintain_payer" :value="scope.row.payer" />
                    </template>
                  </el-table-column>
                  <el-table-column label="维保项目" align="center" prop="maintainRemark" :show-overflow-tooltip="true" />
                  <el-table-column label="关联订单" align="center" prop="orderNo" :show-overflow-tooltip="true" />
                  <el-table-column label="维保附件" align="center" prop="orderNo"> <template slot-scope="scope">
                      <el-image v-if="scope.row.url" :src="scope.row.url" :preview-src-list="scope.row.imgList"
                        style="width: 100px;height: 100px">
                      </el-image>
                    </template>
                  </el-table-column>
                  <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
                  <el-table-column label="记录人" align="center" prop="updateName" />
                </el-table>
                <pagination v-show="repair.total > 0" :total="repair.total" :page.sync="repair.pageNum"
                  :limit.sync="repair.pageSize" @pagination="getRepairList" />
              </el-col>
            </el-row>
            <el-row>
              <el-col :sm="24" v-if="checkPermi(['car:basic:maintenance'])">
                <MmvTitle title="车辆保养记录"></MmvTitle>
              </el-col>
              <el-col :sm="24" v-if="checkPermi(['car:basic:maintenance'])" class="table-padding">
                <el-table v-loading="loading" :data="maintenanceList" border>
                  <el-table-column label="操作" header-align="center" align="center" class-name="small-padding fixed-width"
                    min-width="50" fixed="left">
                    <template slot-scope="scope">
                      <el-button v-if="scope.row.repairStatus == 1" type="text" size="small"
                        @click="overVehicle()">编辑</el-button>
                    </template>
                    <template slot-scope="scope" v-if="scope.row.repairStatus == 1 && checkPermi(['car:basic:maintenanceDeletion'])">
                      <el-button type="text" size="small"
                                 @click="maintenanceDeletion(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column label="维修厂名称" align="center" prop="serviceName" />
                  <el-table-column label="保养时公里数" prop="currentMile" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.currentMile || '--' }}
                    </template>
                  </el-table-column>
                  <el-table-column label="送车时间" align="center" prop="repairStartDate" width="180" />
                  <el-table-column label="取车时间" align="center" prop="repairEndDate" width="180" />
                  <el-table-column label="保养费用合计" align="center" prop="totalPay" />
                  <el-table-column label="付款方" align="center" prop="payer">
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.repair_maintain_payer" :value="scope.row.payer" />
                    </template>
                  </el-table-column>
                  <el-table-column label="保养项目" align="center" prop="maintainRemark" :show-overflow-tooltip="true" />
                  <el-table-column label="关联订单" align="center" prop="orderNo" :show-overflow-tooltip="true" />
                  <el-table-column label="保养附件" align="center" prop="orderNo">
                    <template slot-scope="scope">
                      <el-badge v-if="scope.row.url" :value="scope.row.imgList.length" class="item">
                        <el-image  :src="scope.row.url" :preview-src-list="scope.row.imgList"
                                  style="width: 100px;height: 100px">
                        </el-image>
                      </el-badge>
                    </template>
                  </el-table-column>
                  <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
                  <el-table-column label="记录人" align="center" prop="updateName" />
                </el-table>
                <pagination v-show="maintenance.total > 0" :total="maintenance.total" :page.sync="maintenance.pageNum"
                  :limit.sync="maintenance.pageSize" @pagination="getMaintenanceList" />
              </el-col>
            </el-row>
            <el-row>
              <el-col :sm="24" v-if="checkPermi(['car:basic:inspection'])">
                <MmvTitle title="车辆年检记录"></MmvTitle>
              </el-col>
              <el-col :sm="24" v-if="checkPermi(['car:basic:inspection'])" class="table-padding">
                <el-table v-loading="loading" :data="insuranceList" border>
                  <el-table-column label="操作" header-align="center" align="center" class-name="small-padding fixed-width"
                    min-width="50" fixed="left">
                    <template slot-scope="scope">
                      <el-button v-if="scope.row.inspectionStatus == 1" type="text" size="small"
                        @click="handleInsuranceEdit(scope.row.id)">编辑</el-button>
                    </template>
                  </el-table-column>

                  <el-table-column label="年检年份" align="center" prop="thisTimeInspectionTime">
                    <template slot-scope="scope">
                      <span>{{
                        scope.row.thisTimeInspectionTime | inspectionYear
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="年检时间" align="center" prop="thisTimeInspectionTime" width="200">
                    <template slot-scope="scope">
                      <span>{{
                        parseTime(
                          scope.row.thisTimeInspectionTime,
                          '{y}-{m}-{d}'
                        ) || '--'
                      }}至{{
  parseTime(
    scope.row.nextInspectionTime,
    '{y}-{m}-{d}'
  ) || '--'
}}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="年检费用" align="center" prop="inspectionAmount" />
                  <el-table-column label="年检处理人" align="center" prop="inspectionAgent" />
                  <el-table-column label="年检附件" align="center" prop="orderNo"> <template slot-scope="scope">
                      <el-image v-for="(url, index) in scope.row.urlList" :src="url" :key="index"
                        :preview-src-list="scope.row.urlList" style="width: 100px;height: 100px">
                      </el-image>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination v-show="insurance.total > 0" :total="insurance.total" :page.sync="insurance.pageNum"
                  :limit.sync="insurance.pageSize" @pagination="getListInspection" />
              </el-col>
            </el-row>
            <el-row>
              <el-col :sm="24" v-if="checkPermi(['car:basic:beOnline'])">
                <MmvTitle title="车辆上下线记录"></MmvTitle>
              </el-col>
              <el-col :sm="24" v-if="checkPermi(['car:basic:beOnline'])" class="table-padding">
                <el-table v-loading="loading" :data="onoffList" border>
                  <el-table-column label="下线时间" align="center" prop="createTime" >
                    <template slot-scope="scope">
                      {{scope.row.createTime}}至{{scope.row.updateTime}}
                    </template>
                  </el-table-column>
                  <el-table-column label="下线原因" align="center" prop="reasonForOffline">
                    <template slot-scope="scope">
                      <div v-if="scope.row.reasonForOffline == 1">保养</div>
                      <div v-else-if="scope.row.reasonForOffline == 2">维修</div>
                      <div v-else-if="scope.row.reasonForOffline == 3">处置</div>
                      <div v-else-if="scope.row.reasonForOffline == 4">其他</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="说明" align="center" prop="remark" />
                  <el-table-column label="操作人" align="center" prop="createUser" />
                  <el-table-column label="操作时间" align="center" prop="operationTime" />
                  <el-table-column label="操作" align="center" prop="typeStr" >
                    <template slot-scope="scope">
                      <el-button type="text" size="mini" @click="deleteOffline(scope.row)" v-if="scope.row.schedule==1" v-hasPermi="['car:basic:beOnline']">删除</el-button>
                      <el-button type="text" size="mini" @click="cancelOffline(scope.row)" v-else v-hasPermi="['car:basic:beOnline']">取消下线</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination v-show="onoff.total > 0" :total="onoff.total" :page.sync="onoff.pageNum"
                  :limit.sync="onoff.pageSize" @pagination="getListOnOff" />
              </el-col>
            </el-row>
            <el-row>
              <el-col :sm="24" v-if="checkPermi(['car:basic:allocation'])">
                <MmvTitle title="车辆调出记录"></MmvTitle>
              </el-col>
              <el-col :sm="24" v-if="checkPermi(['car:basic:allocation'])" class="table-padding">
                <el-table v-loading="loading" :data="secondmentList" >
                  <el-table-column label="调出门店" align="center" prop="bringStoreName" />
                  <el-table-column label="调入门店" align="center" prop="callStoreName" />
                  <el-table-column label="调出时间" align="center" prop="startTime" width="180"/>
                  <el-table-column label="说明" align="center" prop="remark">
                    <template v-slot="{row}">
                      {{row.reamrk|filterNull}}
                    </template>
                  </el-table-column>
                  <el-table-column label="操作账号" align="center" prop="createByNmae" />
                </el-table>
                <pagination v-show="secondment.total > 0" :total="secondment.total" :page.sync="secondment.pageNum"
                  :limit.sync="secondment.pageSize" @pagination="getListSecondment" />
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="订单记录" name="3">
            <el-row>
              <el-col :sm="24">
                <MmvTitle title="日租订单记录"></MmvTitle>
              </el-col>
              <el-col :sm="24" class="padding-table">
                <el-table v-loading="loading" :data="orderlist" border>
                  <el-table-column label="订单号" min-width="180" align="center" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      <el-button type="text" style="font-size: 14px" size="small" @click="handleOrderDetail(row)">
                        {{ row.orderNo }}
                      </el-button>
                    </template>
                  </el-table-column>
                  <el-table-column label="承租人" min-width="180" align="center" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      <span>{{ row.memberName }}-</span>
                      <span>{{ row.memberPhone }}</span>
                      <span v-if="row.memberType">
                        -<dict-tag style="display: inline-block" :options="dict.type.memberType"
                          :value="row.memberType" />
                        客户
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="预计取还时间" align="center" min-width="240" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      <span style="color: #d9001b">
                        取：{{ row.rentalStartTime }}
                      </span>&nbsp;&nbsp;&nbsp;
                      <span style="color: #dd5d1b">
                        还：{{ row.rentalEndTime }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="租期" align="center" min-width="100" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      <span>{{ row.leaseDays }}天</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="取还车门店" min-width="240" align="center" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      <span style="color: #d9001b">
                        取：{{ row.reserveTakeStoreName }}
                      </span>&nbsp;&nbsp;&nbsp;
                      <span style="color: #dd5d1b">
                        还：{{ row.reserveAlsoStoreName }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="取车类型" min-width="150" align="center" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      <dict-tag :options="dict.type.rental_type" :value="row.rentalType" />
                    </template>
                  </el-table-column>
                  <el-table-column label="订单状态" min-width="200" align="center" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      <div>
                        <dict-tag :options="dict.type.sys_order_status" :value="row.orderStatus" />
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination v-show="order.total > 0" :total="order.total" :page.sync="order.pageNum"
                  :limit.sync="order.pageSize" @pagination="getOederList" />
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px" v-if="checkPermi(['order:longOrder:list'])">
              <el-col :sm="24">
                <MmvTitle title="月租订单记录"></MmvTitle>
              </el-col>
              <el-col :sm="24" class="padding-table">
                <el-table v-loading="loading" :data="longOrderlist" border>
                  <el-table-column label="订单号" prop="orderNo" show-overflow-tooltip></el-table-column>
                  <el-table-column label="承租人" min-width="130" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      <span>{{ row.memberName }}</span> &nbsp;&nbsp;&nbsp;
                      <span>
                        {{ row.memberPhone }}
                      </span> &nbsp;&nbsp;&nbsp;
                      <span v-if="row.memberType">
                        <dict-tag style="display: inline-block" :options="dict.type.memberType"
                          :value="row.memberType" />客户
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="预计取还时间" min-width="180" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      <span style="color: #d9001b">取：{{ row.rentalStartTime }}</span> &nbsp;&nbsp;&nbsp;
                      <span style="color: #dd5d1b">还：{{ row.rentalEndTime }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="租期" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      <span>{{ row.tenancyTerm }}个月</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="预定车型" min-width="150" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      <span>{{ row.modelName }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column label="车牌号" align="center" prop="carNo" min-width="130" show-overflow-tooltip />
                  <el-table-column label="取还车门店" min-width="150" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      <span style="color: #d9001b">取：{{ row.reserveTakeStoreName }}</span> &nbsp;&nbsp;&nbsp;
                      <span style="color: #dd5d1b">还：{{ row.reserveAlsoStoreName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="订单来源" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      <dict-tag :options="dict.type.sys_order_source" :value="row.orderSource" />
                    </template>
                  </el-table-column>
                  <el-table-column label="订单状态" min-width="200" align="center" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      <span>
                        <dict-tag :options="dict.type.long_order_status" :value="row.orderStatus" />
                      </span>
                      <span v-if="row.orderStatus < 4">
                        <count-down :endTime="row.rentalStartTime" endText="已超时" startText="距离取车时间" />
                      </span>
                      <span v-if="row.orderStatus == 4">
                        <count-down :endTime="row.rentalEndTime" endText="已超时" startText="距离还车时间" />
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="业务员" min-width="100" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      <span>{{ row.salesman }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="下单时间" align="center" min-width="130" show-overflow-tooltip prop="createTime" />
                </el-table>
                <pagination v-show="longOrder.total > 0" :total="longOrder.total" :page.sync="longOrder.pageNum"
                  :limit.sync="longOrder.pageSize" @pagination="getLongOederList" />
              </el-col>
            </el-row>

            <el-row v-if="checkPermi(['ota:ctrip:list'])" style="margin-top: 20px">
              <el-col :sm="24">
                <MmvTitle title="OTA订单记录"></MmvTitle>
              </el-col>
              <el-col :sm="24" class="padding-table">
                <el-table v-loading="loading" :data="ctripList" border>
                  <el-table-column label="订单编号" align="center" min-width="100" show-overflow-tooltip>
                    <template slot-scope="{row}">
                      {{ row.orderEncryptId }}
                    </template>
                  </el-table-column>
                  <el-table-column label="承租人" align="center" min-width="130" show-overflow-tooltip>
                    <template slot-scope="{row}">
                      <span>{{ row.costumerName }}</span>
                      <span>{{ row.costumerTel }}</span>
                      <span>{{ row.customerTypeName }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column label="预约租期" min-width="280" align="center" show-overflow-tooltip>
                    <template slot-scope="{row}">
                      <span>
                        {{ row.estimatedPickUpTime }}~{{ row.estimatedPickOffTime }}
                      </span>
                    </template>
                  </el-table-column>

                  <el-table-column label="预定车型" min-width="280" align="center" show-overflow-tooltip>
                    <template slot-scope="{row}">
                      <div class="model-text">{{ row.reserveVehicleInfos }}</div>
                      <div class="plat-model" v-if="row.modelName">对应系统:{{ row.modelName }}</div>
                    </template>
                  </el-table-column>

                  <el-table-column label="取还方式" min-width="80" align="center" show-overflow-tooltip>
                    <template slot-scope="{row}">
                      {{ row.orderIsSendNameForPickUp }}~{{ row.orderIsSendNameForPickOff }}
                    </template>
                  </el-table-column>

                  <el-table-column label="取还地址" min-width="350" align="center" show-overflow-tooltip>
                    <template slot-scope="{row}">
                      {{ row.pickUpAddress }}~{{ row.pickOffAddress }}
                    </template>
                  </el-table-column>

                  <el-table-column label="实际租期" min-width="200" align="center" show-overflow-tooltip>
                    <template slot-scope="{row}">
                      {{ row.actualPickUpTime }}~{{ row.actualPickOffTime || '--' }}
                      <!--          <span>{{ row.rentDays }}天<span v-if="row.rentHours>0">{{ row.rentHours }}小时</span></span>-->
                    </template>
                  </el-table-column>

                  <el-table-column label="订单来源" align="center" prop="orderSource" show-overflow-tooltip />

                  <el-table-column label="租金总额" align="center" show-overflow-tooltip>
                    <template slot-scope="{row}">
                      <span>¥{{ row.amount }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column label="订单状态" min-width="80" align="center" show-overflow-tooltip>
                    <template slot-scope="{row}">
                      {{ row.orderStatusName }}
                    </template>
                  </el-table-column>

                </el-table>

                <pagination v-show="otaOrder.total > 0" :total="otaOrder.total" :page.sync="otaOrder.pageNum"
                  :limit.sync="otaOrder.pageSize" @pagination="getOtaList" />
              </el-col>
            </el-row>

          </el-tab-pane>
          <el-tab-pane label="违章记录" name="4" v-if="checkPermi(['car:basic:ilegal'])">
            <el-row>
              <el-col :sm="24">
                <MmvTitle title="违章记录"></MmvTitle>
              </el-col>
              <el-col :sm="24">
                <el-table v-loading="loading" :data="illegalList" border>
                  <el-table-column label="违章单据号" align="center" prop="documentNo" />
                  <el-table-column label="违章时间" align="center" prop="illegalTime" width="180">
                    <template slot-scope="scope">
                      <span>{{ parseTime(scope.row.illegalTime) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="违章地点" align="center" prop="illegalLocation" />
                  <el-table-column label="违章内容" align="center" prop="illegalDetail" />
                  <el-table-column label="扣分" align="center" prop="pointsDeduction" />
                  <el-table-column label="罚款金额" align="center" prop="illegalFines" />
                  <el-table-column label="处理状态" align="center" prop="processingStatus" width="150">
                    <template slot-scope="{ row }">
                      {{
                        {
                          1: '未处理',
                          2: '已处理未缴费',
                          3: '已处理',
                          4: '已缴费未处理',
                        }[Number(row.processingStatus)]
                      }}
                    </template>
                  </el-table-column>
                </el-table>
                <pagination v-show="illegal.total > 0" :total="illegal.total" :page.sync="illegal.pageNum"
                  :limit.sync="illegal.pageSize" @pagination="getIllegalList" />
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="加油记录" name="5">
            <el-row>
              <el-col :sm="24">
                <MmvTitle title="车辆加油记录"></MmvTitle>
              </el-col>
              <el-col :sm="24">
                <span>累计加油金额：￥{{ recordCount || 0 }}</span>
              </el-col>
              <el-col :sm="24" style="margin-top: 5px;">
                <el-table v-loading="loading" :data="recordList" border>
                  <el-table-column label="加油日期" align="center" prop="refuelingDate" min-width="160"
                    :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ parseTime(scope.row.refuelingDate, '{y}-{m}-{d}') }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="使用油卡" align="center" prop="cardNo" min-width="160"
                    :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.cardNo || '--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="加油金额" align="center" prop="refuelingAmount" min-width="160"
                    :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      ¥{{ scope.row.refuelingAmount }}
                    </template>
                  </el-table-column>
                  <el-table-column label="加油前公里数" align="center" prop="kilometers" min-width="160"
                    :show-overflow-tooltip="true" />
                  <el-table-column label="加油人" align="center" prop="oiler" min-width="160"
                    :show-overflow-tooltip="true" />
                  <el-table-column label="操作" fixed="left" align="center" width="160"
                    class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                      <el-button size="small" type="text" @click="handleRefuelingDetail(scope.row)">查看
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination v-show="refueling.total > 0" :total="refueling.total" :page.sync="refueling.pageNum"
                  :limit.sync="refueling.pageSize" @pagination="getRefuelingList" />
              </el-col>
            </el-row>
          </el-tab-pane>

        </el-tabs>
      </template>
      <template v-slot:footer>
        <div class="footer">
          <el-button type="info" plain @click.native="close">取消</el-button>
        </div>
      </template>
    </CustomContent>

    <el-dialog title="年检详情" append-to-body :visible.sync="showInsuranceDetail" width="1100px" destroy-on-close>
      <el-form label-width="120px" ref="insuranceForm" :model="insuranceForm" :rules="insuranceRules"
        label-position="right" v-if="showInsuranceDetail">
        <el-row :gutter="15">
          <el-col :span="24">
            <MmvTitle title="年检"></MmvTitle>
          </el-col>
          <el-row :gutter="15">
            <el-col :span="12">
              <el-form-item label="车牌号" prop="carNo">
                <el-input :value="insuranceForm.carNo" placeholder="请选择车辆" readonly>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="12">
              <el-form-item label="行驶证注册日期" prop="drivingLicenseValidityDate">
                <el-input :value="insuranceForm.drivingLicenseValidityDate" placeholder="未上传行驶证" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="12">
            <el-form-item label="本次年检日期" prop="thisTimeInspectionTime">
              <el-date-picker v-model="insuranceForm.thisTimeInspectionTime" placeholder="本次年检日期" type="date"
                style="width: 100%" value-format="yyyy-MM-dd" @change="nextDate()">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下次年检日期" prop="nextInspectionTime">
              <el-date-picker v-model="insuranceForm.nextInspectionTime" placeholder="下次年检日期" type="date"
                style="width: 100%" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年检费用" prop="inspectionAmount">
              <el-input v-model="insuranceForm.inspectionAmount" placeholder="请输入年检费用" @keyup.native="
                insuranceForm.inspectionAmount = oninput(insuranceForm.inspectionAmount, 2)
                "></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="年检处理人" prop="inspectionAgent">
              <el-input v-model="insuranceForm.inspectionAgent" placeholder="请输入年检处理人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="附件" prop="urlList">
              <ImageUpload v-model="insuranceForm.urlList" :limit="3" isArray />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitInsuranceForm">确 定</el-button>
        <el-button @click="showInsuranceDetail = false">取 消</el-button>
      </div>
    </el-dialog>



    <el-dialog title="订单详情" :visible.sync="showOrderdetail" width="1100px" destroy-on-close append-to-body>
      <MmvOrderDetail ref="MmvOrderDetail" v-if="showOrderdetail" :orderNo="nowOrderNo"></MmvOrderDetail>
      <div slot="footer">
        <el-button @click="showOrderdetail = false">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="维修详情" :visible.sync="detailsOpen" width="900px" append-to-body>
      <el-form label-width="120px">
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="维保类型">{{ repairMaintain.type == 1 ? '保养' : '保养' }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维保状态">{{ repairMaintain.repairStatus == 1 ? '维保中' : '已完成' }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="送车时间">{{ repairMaintain.repairStartDate }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="取车时间">{{ repairMaintain.repairEndDate }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维修厂名称">{{ repairMaintain.serviceName }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="费用合计">{{ repairMaintain.totalPay }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">{{ repairMaintain.remark }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="附件">
              <el-row>
                <el-col v-if="repairMaintain.imgList" :span="4" v-for="(item, index) in repairMaintain.imgList"
                  :key="index">
                  <el-image style="margin-left: 5px;width: 100px;height: 100px" :src="getImgUrl(item)"
                    :preview-src-list="[getImgUrl(item)]" fit="cover"></el-image>
                </el-col>
              </el-row>

            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailsOpen = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="保养详情" :visible.sync="detailsMaintenanceOpen" width="900px" append-to-body>
      <el-form label-width="120px">
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="当前公里数">{{ carMaintain.currentMile || 0 }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保养时间">{{ carMaintain.maintenanceDate }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保养合计费用">{{ carMaintain.maintenanceFee }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下次保养公里数">{{ carMaintain.nextMile }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="保养备注">{{ carMaintain.remark }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="附件">
              <el-row>
                <el-col v-if="carMaintain.imgList" :span="4" v-for="(item, index) in carMaintain.imgList" :key="index">
                  <el-image style="margin-left: 5px;width: 100px;height: 100px" :src="getImgUrl(item)"
                    :preview-src-list="[getImgUrl(item)]" fit="cover"></el-image>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailsMaintenanceOpen = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="titleRefueling" :visible.sync="openRefuelingDetail" width="800px" append-to-body>
      <el-row>
        <el-col :sm="24" :md="24" :lg="24" class="table-padding">
          <el-descriptions :column="2" border :labelStyle="{ width: '120px' }">
            <el-descriptions-item>
              <template slot="label"> 车牌号</template>
              {{ refuelingForm.carNo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 加油日期</template>
              {{ refuelingForm.refuelingDate }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 加油人</template>
              {{ refuelingForm.oiler }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 加油金额</template>
              ¥{{ refuelingForm.refuelingAmount }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 使用油卡</template>
              {{ refuelingForm.cardNo || '--' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 加油前公里数</template>
              {{ refuelingForm.kilometers }}Km
            </el-descriptions-item>
            <el-descriptions-item span="2">
              <template slot="label"> 备注</template>
              {{ refuelingForm.remark }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">加油前油表照片</template>
              <el-image v-if="refuelingForm.photoOfBefore" :src="getImgUrl(refuelingForm.photoOfBefore)"
                :preview-src-list="[getImgUrl(refuelingForm.photoOfBefore)]" fit="contain"
                style="width: 100px;height: 100px"></el-image>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">加油后油表照片</template>
              <el-image v-if="refuelingForm.photoOfAfter" :src="getImgUrl(refuelingForm.photoOfAfter)"
                :preview-src-list="[getImgUrl(refuelingForm.photoOfAfter)]" fit="contain"
                style="width: 100px;height: 100px"></el-image>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">加油小票</template>
              <el-image v-if="refuelingForm.refuelingTicket" :src="getImgUrl(refuelingForm.refuelingTicket)"
                :preview-src-list="[getImgUrl(refuelingForm.refuelingTicket)]" fit="contain"
                style="width: 100px"></el-image>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openRefuelingDetail = false">取 消</el-button>
      </div>
    </el-dialog>
    <MmvBy ref="MmvBy" :carId="editNowId" :carPlateNo="editNowCarNo" :openBy="openBy" v-if="openBy"
      @close="openBy = false; getMaintenanceList(); getRepairList()"></MmvBy>

    <MmvRenewalEdit ref="MmvJq" :insuranceType="2" :id="form.jqId" :carId="form.id" :carPlateNo="form.carNo" title="交强险续保" :open="openJq" v-if="openJq" @close="openJq = false;handleUpdate()"></MmvRenewalEdit>
    <MmvRenewalEdit ref="MmvSy" :insuranceType="1" :id="form.syId" :carId="form.id" :carPlateNo="form.carNo" title="商业险续保" :open="opensy" v-if="opensy" @close="opensy = false;handleUpdate()"></MmvRenewalEdit>

  </div>
</template>

<script>
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import MmvOrderDetail from '@/views/order/orderBasic/detail.vue'
import {getInfo, listOnOff, carBindInformationList, cancelById} from '@/api/car/car_basic'
import { index } from '@/api/order'
import {listRepairMaintain, getRepairMaintainId, deleteRepairMaintainById} from '@/api/car/repairMaintain'
import { listIllegal } from '@/api/car/illegal'
import { listInspectionAll } from '@/api/maintenance/inspection'
import { checkPermi } from '@/utils/permission'
import CustomContent from '@/components/custom/content.vue'
import * as longOrderApi from "@/api/longOrder";
import { getRecord, listRecord, countRecord } from "@/api/car/refuelingRecord";
import { getInfoById, updateInspection } from "@/api/maintenance/inspection";
import MmvBy from "@/views/car/basic/repairMaintain/feedback";
import { listCtrip } from "@/api/ota/ctrip";
import MmvRenewalEdit from "@/views/car/basic/renewalEdit";
import {listSecondment} from "@/api/car/secondment";
import {filterNull} from "@/utils/filters";
export default {
  name: 'carsave',
  dicts: [
    'car_status',
    'car_color',
    'accident_level',
    'car_accessories',
    'memberType',
    'sys_order_source',
    'business_yes_no',
    'vehicle_source',
    'supplier_type',
    'rent_bill_type',
    'sys_order_status',
    'rental_type',
    'manufacturer',
    'equipmentModel',
    'repair_status',
    'repair_type', 'long_order_status', 'repair_maintain_payer'
  ],
  components: {
    MmvRenewalEdit,
    MmvTitle,
    MmvOrderDetail,
    CustomContent, MmvBy
  },
  data() {
    return {
      //商业险续保
      opensy: false,
      //交强险续保
      openJq: false,
      // 设备列表
      deviceList: [],
      tabIndex: '0',
      showInsuranceDetail: false,
      infoLoading: false,
      insuranceForm: {
        carNo: '', // 车牌号
        vinNo: '', // 车架号
        carInfo: '', // 车辆信息
        thisTimeInspectionTime: '',
        nextInspectionTime: '',
        inspectionAmount: '', // 年检费用
        inspectionAgent: '', // 年审代理人
        vehicleAdministrativeOffice: '', // 车管所
        urlList: [], // 附件
      },
      insuranceRules: {
        carNo: [{ required: true, message: '请选择车辆', trigger: 'change' }],
        vinNo: [{ required: true, message: '请选择车辆', trigger: 'change' }],
        carInfo: [{ required: true, message: '请选择车辆', trigger: 'change' }],
        thisTimeInspectionTime: [
          { required: true, message: '请选择车辆年审时间', trigger: 'blur' },
        ],
        nextInspectionTime: [
          { required: true, message: '请选择车辆年审时间', trigger: 'blur' },
        ],
        inspectionAmount: [
          { required: true, message: '请输入年检费用', trigger: 'blur' },
          {
            pattern: /^[0-9]+(.[0-9]{1,2})?$/,
            message: '价值为正数，且保留两位小数',
            trigger: 'blur',
          },
        ],

        vehicleAdministrativeOffice: [
          { required: true, message: '请输入车管所', trigger: 'blur' },
        ],
      },
      detailsOpen: false,
      repairMaintain: {},
      detailsMaintenanceOpen: false,
      carMaintain: {},


      editNowId: null,
      editNowCarNo: null,
      openBy: false,

      // 遮罩层
      loading: true,
      //车辆订单
      order: {
        total: 0,
        pageNum: 0,
        pageSize: 5,
      },
      //ota车辆订单
      otaOrder: {
        total: 0,
        pageNum: 0,
        pageSize: 5,
      },
      orderlist: [],
      ctripList: [],
      //车辆订单
      longOrder: {
        total: 0,
        pageNum: 0,
        pageSize: 5,
      },
      longOrderlist: [],
      nowOrderNo: null,
      showOrderdetail: false, // 显示订单详情

      //年检记录
      insurance: {
        total: 0,
        pageNum: 0,
        pageSize: 5,
      },
      insuranceList: [],

      //出检记录
      repair: {
        total: 0,
        pageNum: 0,
        pageSize: 5,
      },
      repairList: [],

      //违章记录
      illegal: {
        total: 0,
        pageNum: 0,
        pageSize: 5,
      },
      illegalList: [],

      //保养记录
      maintenance: {
        total: 0,
        pageNum: 0,
        pageSize: 5,
      },
      maintenanceList: [],

      //上下线记录
      onoff: {
        total: 0,
        pageNum: 0,
        pageSize: 5,
      },
      onoffList: [],

      //调出记录
      secondment: {
        total: 0,
        pageNum: 0,
        pageSize: 5,
      },
      secondmentList: [],
      // 表单参数
      form: {
        carBrandName: '',
        carSeriesName: '',
        carModelName: '',
        drivingLicenseImgBack: null,
        drivingLicenseImgFront: null,
      },
      recordList: [],
      refueling: {
        total: 0,
        pageNum: 0,
        pageSize: 5,
      },
      refuelingForm: {},
      openRefuelingDetail: false,
      titleRefueling: '',
      recordCount: 0
    }
  },
  filters: {
    inspectionYear(date) {
      if (date) {
        return new Date(date).getFullYear() || '--'
      }
      return '--'
    },
  },
  created() {
    this.tabIndex = this.$route.query.index || '0'
    this.handleUpdate()
  },
  methods: {
    filterNull,

    // 获取车辆绑定设备列表
    getBindDeviceList() {
      carBindInformationList(this.form.id).then(res => {
        this.deviceList = res.data;
      })
    },
    /** 加油查看 */
    handleRefuelingDetail(row) {
      const id = row.id
      getRecord(id).then((response) => {
        this.refuelingForm = response.data
        this.openRefuelingDetail = true
        this.titleRefueling = '加油记录详情'
      })
    },
    //维修保养详情
    handleDetail(id) {
      getRepairMaintainId(id).then(response => {
        this.repairMaintain = response.data;
        this.detailsOpen = true;
      });
    },
    checkPermi,
    /** 查询车辆订单列表 */
    getOederList() {
      this.loading = true
      let param = {
        ...this.order,
        carNo: this.form.carNo,
      }
      index(param).then((response) => {
        this.orderlist = response.rows
        this.order.total = response.total
        this.loading = false
      })
    },
    /** 查询ota车辆订单列表 */
    getOtaList() {
      this.loading = true
      let param = {
        ...this.otaOrder,
        carLicenceNum: this.form.carNo,
      }

      listCtrip(param).then(response => {
        this.ctripList = response.rows;
        this.otaOrder.total = response.total;
        this.loading = false;
      });
    },
    //加油记录
    getRefuelingList() {
      this.loading = true
      this.param = {
        ...this.refueling,
        carId: this.form.id
      }
      listRecord(this.param).then((response) => {
        this.recordList = response.rows
        this.refueling.total = response.total
        this.loading = false
      })
      countRecord(this.param).then((response) => {
        this.recordCount = response.data
      })
    },
    getLongOederList() {
      let params = {
        ...this.longOrder,
        carNo: this.form.carNo,
      }
      longOrderApi.index(params).then((response) => {
        this.longOrderlist = response.rows
        this.longOrder.total = response.total
      })
    },
    /** 查询车辆订单详情 */
    handleOrderDetail(row) {
      this.nowOrderNo = row.orderNo
      this.$router.push({
        path: '/orderBasic/detail',
        query: { orderNo: row.orderNo },
      })
    },
    /** 编辑年检 */
    handleInsuranceEdit(id) {
      this.showInsuranceDetail = true;
      getInfoById(id).then(res => {
        this.insuranceForm = res.data
      })

    },
    /** 取消下线 */
    cancelOffline(row) {
      this.$modal
        .confirm('是否确认取消车辆下线？')
        .then(function () {
          return cancelById({id: row.id})
        })
        .then(() => {
          this.getListOnOff()
          this.$modal.msgSuccess('取消成功')
        })
        .catch(() => {
        })
    },
    /** 删除下线 */
    deleteOffline(row) {
      this.$modal
        .confirm('是否确认删除车辆下线？')
        .then(function () {
          return cancelById({id: row.id})
        })
        .then(() => {
          this.getListOnOff()
          this.$modal.msgSuccess('取消成功')
        })
        .catch(() => {
        })
    },
    submitInsuranceForm() {
      updateInspection(this.insuranceForm).then(res => {
        this.$modal.msgSuccess("修改成功");
        this.showInsuranceDetail = false;
        this.getListInspection();
      });
    },
    /** 查询车辆维保列表 */
    getRepairList() {
      this.loading = true
      let param = {
        ...this.repair,
        carPlateNo: this.form.carNo,
        type: 2,
      }
      listRepairMaintain(param).then((response) => {
        this.repairList = response.rows
        this.repair.total = response.total
        this.loading = false
      })
    },
    /** 查询车辆年检列表 */
    getListInspection() {
      this.loading = true
      let param = {
        ...this.insurance,
        carNo: this.form.carNo,
      }
      listInspectionAll(param).then((response) => {
        this.insuranceList = response.rows
        this.insurance.total = response.total
        this.loading = false
      })
    },
    /** 查询车辆上下线列表 */
    getListOnOff() {
      this.loading = true
      let param = {
        ...this.onoff,
        carId: this.form.id,
      }
      listOnOff(param).then((response) => {
        this.onoffList = response.rows
        this.onoff.total = response.total
        this.loading = false
      })
    },
    /** 查询车辆调拨列表 */
    getListSecondment() {
      this.loading = true
      let param = {
        ...this.secondment,
        carId: this.form.id,
        status:2
      }
      listSecondment(param).then(response => {
        this.secondmentList = response.rows;
        this.secondment.total = response.total;
        this.loading = false;
      });
    },
    /** 查询车辆违章列表 */
    getIllegalList() {
      this.loading = true
      let param = {
        ...this.illegal,
        carNo: this.form.carNo,
      }
      listIllegal(param).then((response) => {
        this.illegalList = response.rows
        this.illegal.total = response.total
        this.loading = false
      })
    },
    /** 查询车辆保养记录 */
    getMaintenanceList() {
      this.loading = true
      let param = {
        ...this.maintenance,
        carPlateNo: this.form.carNo,
        type: 1,
      }
      listRepairMaintain(param).then((response) => {
        this.maintenanceList = response.rows
        this.maintenance.total = response.total
        this.loading = false
      })
    },
    close() {
      // 关闭页面
      this.reset()
      this.$router.go(-1)
      this.$store.dispatch('tagsView/delView', this.$route)
    },
    overVehicle() {
      this.editNowId = this.form.id;
      this.editNowCarNo = this.form.carNo;
      this.openBy = true;
    },
    maintenanceDeletion(row){
      this.editNowId = this.form.id;
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除维保编号为"' + ids + '"的数据项？').then(function () {
        return deleteRepairMaintainById(ids);
      }).then(() => {
        this.getRepairList();
        this.getMaintenanceList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        carBrandId: null,
        carSeriesId: null,
        carModelId: null,
        belongingStoreId: null,
        locatedStoreId: null,
        carNo: null,
        carBrandName: '',
        carSeriesName: '',
        carModelName: '',
        vinNo: null,
        engineNo: null,
        storeName: null,
        carStatus: '1',
        carColor: null,
        drivingLicenseImgFront: null,
        drivingLicenseImgBack: null,
        drivingLicenseValidityDate: null,
        accessoryItems: null,
        accessoryItemsName: null,
        accessoryItemArray: [],
        accessoryItemsNameArray: [],
        delFlag: null,
        repairStatus: 0,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        maintenanceCycle: null,
        tenantId: null,
      }
      this.resetForm('form')
    },

    /** 编辑按钮操作 */
    handleUpdate() {
      this.infoLoading = true;
      this.reset()
      const id = this.$route.query.id
      getInfo(id).then((response) => {
        this.infoLoading = false;
        this.form = response.data.carBasic
        this.getOederList()
        this.getRefuelingList()
        //获取车辆设备列表
        this.getBindDeviceList();
        if (checkPermi(['order:longOrder:list'])) {
          //长租订单
          this.getLongOederList()
        }

        if (checkPermi(['ota:ctrip:list'])) {
          //ota订单
          this.getOtaList()
        }
        if (checkPermi(['car:basic:ilegal'])) {
          //车辆违章
          this.getIllegalList()
        }
        if (checkPermi(['car:basic:repair'])) {
          //车辆维保
          this.getRepairList()
        }
        if (checkPermi(['car:basic:inspection'])) {
          //车辆年检
          this.getListInspection()
        }
        if (checkPermi(['car:basic:maintenance'])) {
          //车辆保养
          this.getMaintenanceList()
        }
        if (checkPermi(['car:basic:beOnline'])) {
          //车辆上下线记录
          this.getListOnOff()
        }
        if (checkPermi(['car:basic:allocation'])) {
          //车辆调出记录
          this.getListSecondment()
        }

        // 车辆维修	car:basic:repair
        // 车辆保险	car:basic:insurance
      })
    },
    baseurl(urlList) {
      return urlList.forEach(item => {
        this.getImgUrl(item)
      })
    }
  },
}
</script>
<style lang="scss" scoped>
.depositRecord {
  color: #333;
  border-bottom: 1px solid #e6ebf5;
  padding: 15px 0;
  width: 100%;
  text-align: center;
}

.addDevice {
  position: relative;
  font-size: 14px;
  top: 8px;
  color: #5473E8;
}
</style>
